<script setup lang="ts">
const copy_year = (new Date()).getFullYear()
const copyright = "凡品【Fanpin】"
const ipc_no = "渝ICP备2021007274号-1"
const ps_no = "渝公网安备50010302505180号"
</script>

<template>
  <el-footer>
    <div class="footer_copyright">
      <span v-html="$t('common.copyright', { copy_year, copyright })"></span>
      <span>
        <el-link href="https://beian.miit.gov.cn" target="_blank" :underline="false">
          {{ $t('common.internet_filing', {ipc_no}) }}
        </el-link>
      </span>
      <br/>
      <span>
        <el-image
            style="width: 24px; height: 24px"
            src="/images/public_security_filing.webp"
            fit="cover"
        />
        <el-link :href="`https://beian.mps.gov.cn/#/query/webSearch?code=${ps_no}`" target="_blank" :underline="false">
          {{ $t('common.public_security_filing', {ps_no}) }}
        </el-link>
      </span>
      <span>
				<el-link href="https://www.12377.cn" target="_blank" :underline="false">
          {{ $t('common.reporting_center') }}
        </el-link>
			</span>
      <br/>
      <span>{{ $t('common.browser_recommendations') }}</span>
    </div>
  </el-footer>
</template>

<style scoped lang="scss">
.footer_copyright {
  margin-bottom: 32px;

  span {
    margin: auto 8px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 32px;

    .el-image {
      margin-right: 5px;
      vertical-align: middle;
    }

    a,
    .el-link {
      color: #ffffff;

      &:hover {
        color: #ffffff;
      }
    }
  }
}
</style>